<template>
	<div class="baseRight">
		<box code="cqjc" @getLocation="toLocation('虫情监测设备')">
			<template #rightTop>
				<el-select
					size="mini"
					class="no-focus-border"
					placeholder="选择时间"
					v-model="num"
					style="width: 110px; font-size: 12px; outline: none"
					:teleported="false"
					@change="changeDate"
				>
					<el-option label="近7日监测" :value="7"></el-option>
					<el-option label="近30日监测" :value="30"></el-option>
				</el-select>
			</template>
			<div class="table-box">
				<div class="table">
					<div class="th flex">
						<div class="td flex1">病虫名称</div>
						<div class="td flex1">测报数量（只）</div>
					</div>
					<div class="th flex" v-for="item of bugList" :key="item.name">
						<div class="td flex1">{{ item.name }}</div>
						<div class="td flex1">{{ item.value }}</div>
					</div>
				</div>
			</div>
		</box>
		<box code="xyjc" style="margin: 12px 0" @getLocation="toLocation('性诱监测设备')">
			<xyjcChart :rightCode="rightCode"></xyjcChart>
		</box>
		<box code="trjc" @getLocation="toLocation('土壤墒情监测设备')">
			<div class="bottom">
				<div class="list-top flex">
					<div class="top-item">
						<div class="top-item_top">{{ soliObj.depth10Temp }}℃</div>
						<div class="top-item_bottom">土壤温度</div>
					</div>
					<div class="top-item">
						<div class="top-item_top">{{ soliObj.depth10Humidity }}%</div>
						<div class="top-item_bottom">土壤水分</div>
					</div>
					<div class="top-item">
						<div class="top-item_top">{{ soliObj.depth10Electric }}Lux</div>
						<div class="top-item_bottom">电导率</div>
					</div>
				</div>
				<div class="list-bottom flex">
					<div class="bottom-item">
						<div class="bottom-item_top">{{ soliObj.depth10Ph }}</div>
						<div class="bottom-item_bottom">PH值</div>
					</div>
					<div class="bottom-item">
						<div class="bottom-item_top">{{ soliObj.nitrogen }}mg/kg</div>
						<div class="bottom-item_bottom">土壤氮</div>
					</div>
					<div class="bottom-item">
						<div class="bottom-item_top">{{ soliObj.phosphorus }}mg/kg</div>
						<div class="bottom-item_bottom">土壤磷</div>
					</div>
					<div class="bottom-item">
						<div class="bottom-item_top">{{ soliObj.potassium }}mg/kg</div>
						<div class="bottom-item_bottom">土壤钾</div>
					</div>
				</div>
				<trjcChart :rightCode="rightCode"></trjcChart>
			</div>
		</box>
	</div>
</template>
    
<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { getPestDataByJoin, getSoilStatisticsMaxAndMinData, getLastUpload } from '/@/api/largeScreen/baseView';
const props = defineProps({
	rightCode: {
		type: Array,
		default: [],
	},
});
const emit = defineEmits(['toMarkerLocation']);
const box = defineAsyncComponent(() => import('./box.vue'));
const xyjcChart = defineAsyncComponent(() => import('./xyjcChart.vue'));
const trjcChart = defineAsyncComponent(() => import('./trjcChart.vue'));
const num = ref(7);
const soliObj = ref({});
const bugList = reactive([
	{
		name: '螟虫',
		value: 20,
	},
	{
		name: '飞虱',
		value: 25,
	},
	{
		name: '蓟马',
		value: 21,
	},
	{
		name: '刺蛾',
		value: 10,
	},
]);
const toLocation = (data: any) => {
	emit('toMarkerLocation', data);
};

const getPestList = () => {
	getPestDataByJoin({ deviceCode: props.rightCode[0], num: num.value }).then((res) => {});
};

const changeDate = () => {
	getPestList();
};

onMounted(() => {
	setTimeout(() => {
		getPestList();
		getLastUpload({ deviceCode: props.rightCode[2] }).then((res) => {
			soliObj.value = res.data || {};
		});
		getSoilStatisticsMaxAndMinData({ deviceCode: props.rightCode[2] }).then((res) => {});
	}, 1000);
});
</script>
<style lang='less' scoped>
@import url('../../styles/selectStyle');
@import url('../../styles/scrollbar');
.baseRight {
	width: 388px;
	.table-box {
		height: 200px;
		overflow-x: hidden;
	}
	.no-focus-border .el-input__inner:focus {
		outline: none;
		box-shadow: none;
		border-color: #dcdfe6;
	}

	.no-focus-border .el-input.is-focus .el-input__inner {
		box-shadow: none;
		border-color: #dcdfe6;
	}
	.table {
		padding: 8px;
		border-radius: 2px;
		height: 180px;
		overflow-x: hidden;
		.th {
			color: #c9ffff;
			text-align: center;
			.td {
				height: 36px;
				line-height: 36px;
			}
			&:nth-child(2n + 1) {
				color: #e6f6ff;
				background: rgba(230, 246, 255, 0.1);
			}
		}
	}
	.bottom {
		padding: 15px 22px;
		box-sizing: border-box;
	}
	.list-top {
		.top-item {
			width: 109px;
			height: 56px;
			background: linear-gradient(90deg, rgba(11, 92, 174, 0.3) 0%, rgba(11, 92, 174, 0.6) 100%);
			border-radius: 8px;
			text-align: center;
			margin-right: 10px;
			.top-item_top {
				color: #2dd5ff;
				position: relative;
				height: 28px;
				line-height: 28px;
				&:after {
					content: '';
					position: absolute;
					width: 63px;
					height: 1px;
					background: url(../../image/icon_line.png) no-repeat;
					bottom: 0;
					background-size: 100% 100%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			.top-item_bottom {
				color: #ffffff;
				height: 28px;
				line-height: 28px;
				position: relative;
				&:before {
					content: '';
					position: absolute;
					width: 2px;
					height: 2px;
					border-radius: 50%;
					background: #00d2ff;
					left: 15px;
					top: 50%;
				}
				&:after {
					content: '';
					position: absolute;
					width: 2px;
					height: 2px;
					border-radius: 50%;
					background: #00d2ff;
					right: 15px;
					top: 50%;
				}
			}

			&:nth-child(-1) {
				margin-right: 0;
			}
		}
	}

	.list-bottom {
		margin-top: 12px;
		margin-bottom: 20px;
		.bottom-item {
			width: 80px;
			height: 56px;
			background: linear-gradient(90deg, rgba(11, 92, 174, 0.3) 0%, rgba(11, 92, 174, 0.6) 100%);
			border-radius: 8px;
			text-align: center;
			margin-right: 10px;
			.bottom-item_top {
				color: #2dd5ff;
				position: relative;
				height: 28px;
				line-height: 28px;
				&:after {
					content: '';
					position: absolute;
					width: 63px;
					height: 1px;
					background: url(../../image/icon_line.png) no-repeat;
					bottom: 0;
					background-size: 100% 100%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			.bottom-item_bottom {
				color: #ffffff;
				height: 28px;
				line-height: 28px;
				position: relative;
				&:before {
					content: '';
					position: absolute;
					width: 2px;
					height: 2px;
					border-radius: 50%;
					background: #00d2ff;
					left: 10px;
					top: 50%;
				}
				&:after {
					content: '';
					position: absolute;
					width: 2px;
					height: 2px;
					border-radius: 50%;
					background: #00d2ff;
					right: 10px;
					top: 50%;
				}
			}

			&:nth-child(-1) {
				margin-right: 0;
			}
		}
	}
}
.flex {
	display: flex;
}

.p1Color {
	color: #2dd5ff;
}

.font16 {
	font-size: 16px;
	margin-right: 5px;
}

.font14 {
	font-size: 14px;
}

.flex1 {
	flex: 1;
}
</style>